<template>
  <el-table-column v-bind="item">
    <!-- 表头插槽 -->
    <template #header>
      <component
        v-if="item.renderHeader"
        :is="item.renderHeader"
        :column="item"
        :row="scope.row"
      ></component>
      <slot :name="item.prop + 'Header'" :column="item" v-else>
        {{ item.label }}
      </slot>
    </template>
    <template #default="scope">
      <component
        v-if="item.render"
        :is="item.render"
        :row="scope.row"
      ></component>
      <slot :name="item.prop" :row="scope.row" :column="item" v-else>
        {{ itemLabel(handleRowAccordingToProp(scope.row, item.prop)) }}
      </slot>
      <template v-if="item.children && item.children.length">
        <TableColumn
          v-for="(child, index) in item.children"
          :key="index"
          :item="child"
        >
          <template v-for="(_, slotName) in $slots"
                 v-slot:[slotName]="slotProps">
          <slot :name="slotName" v-bind="slotProps"></slot>
        </template>
        </TableColumn>
      </template>
    </template>

    <!-- 如果有子集 -->
  </el-table-column>
</template>

<script setup lang="tsx">
import { ref, reactive, defineEmits, onMounted } from "vue";
import TableColumn from "/@/components/table/component/tableColumn.vue";
const state = reactive({});
import { itemLabel, handleRowAccordingToProp } from "/@ts/hooks/format";

defineProps({
  item: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped lang="scss"></style>
